最近在项目开发中遇到这样一个问题：后端使用的是 Python Flask 框架，渲染方式为后端渲染。而前端使用的 Vue 技术栈。页面的显示通过后端渲染生成的 dist 包中的 index.html 文件来实现。由于项目的历史包袱，后端需要传值给前端，前端需要在某些组件中使用后端渲染传递过来的值。但是有一点略坑：后端渲染时只能识别 vue 生成的 index.html，在 vue 中是无法直接通过 {{ 参数名 }} 的方式直接获取传入参数 。本文对于这个问题给出三种可行的解决方案。

Python Flask 框架中使用 render_template 函数来渲染对应的模板，该函数的第二个参数就是传入的参数。示例代码如下：

上面代码是一个 Flask 中比较常规的写法。parm_value 是后端要传给 index.html 模板中的值， index.html 是 Vue 中生成的打包文件。在 index.html 中，可以使用 {{ parm_value }} 在模板中展示后端传入的值。

PS: Python Flask 渲染时，可能会因为 {{ }} 符号原因，与 vue 的插值语法有冲突，后端无法识别并正常渲染，需要修改 Vue 的分隔符 delimiters 项来避免后端渲染错误。

通过 index.html 中的 title 渲染值，在 vue 组件中通过 document.title 来进行获取。

在 vue 工程中的 index.html 中设置 title 如下：

当目标打包文件 index.html 被渲染成功后，parm_value 就会被 Flask 识别出来，渲染成传入的值。在 Vue 组件中，可以进行以下的处理：

在 vue 组件中，pValue 就是后端渲染传入的值了。

在 index,html 中添加一个与 app 同级的 dom 节点

也许你会问一个问题，为什么不将 dom 结点放在 div#app 内部？答案很简单：因为生成的 dom 节点若在 div#app 内，运行时会被替换掉，在 vue 组件中无法获取到对应的 dom 节点。

在 vue 组件中处理：

在 index.html 中新增 script 标签进行渲染，通过 window.xxx 进行获取

在 vue 组件中，通过 window.pValue 直接获取渲染值。

以上，就是 Vue 前端工程中获取后端渲染方式传递值的三种方式。个人推荐第二、三种方式，孰优孰劣，可斟酌使用。由于项目是从后端渲染模板的方式逐渐升级为前后端分离的方式，在此过程中遇到了这个问题，梳理并总结出来，供后续查阅，避免再次入坑。

python flask 总结以及一些各种传值问题

Flask向模板（template）传递多个参数或者把全部的本地参数传递给template